const musicTpl = require('../views/music.html')
import getdata from '../models/getdata';
import Bscroll from 'better-scroll';
class MusicConcert{
    constructor(){

    }
    async render(){
        let list = (await getdata.getmusic()).suggest;
        let html = template.render(musicTpl,{
            list
        })
        $('.all-content-wrap').html(html);
        let bscroll = new Bscroll('.all-content-wrap',{
            probeType:2
        });
        bscroll.scrollTo(0,-40);
        bscroll.on('scroll',function(){
            if(this.y > 20){
                //console.log(111);
                $('.head img').addClass('up');
                
            }
            let dataY = this.y - bscroll.maxScrollY;
            if(dataY < 0 ){
                $('.foot img').addClass('down');
            }
            
        })

        bscroll.on('touchEnd',function(){
            if(this.y > 20){
                console.log(this.y);
                $('.head img').attr({'src':'/assets/images/ajax-loader.gif'});
                $.ajax({
                    url:'/dm/external/gl.html?projects=599610937143,178499,599613953034,599338180162,599409412896,599890034307,599736823536,599863629962,598649116078,599288498353,599538633407,598602110841,599070250127,598459506734,597868864250,598164661784,177977,178470,598091718728,597632025030,178393,597775885054,599150973391,599316261141,599697177664,599080298568,598788625341,599819951129,597891898384,599538578141&ctl=%E8%AF%9D%E5%89%A7%E6%AD%8C%E5%89%A7'
                }).then((res) => {
                    let data =  res.suggest;
                    //console.log(data);
                    list = [...data,...list];
                    console.log(list);
                    let html = template.render(musicTpl,{
                        list
                    })
                    
                    $('.all-content-list').html(html);
                    
                    bscroll.scrollTo(0,-40,200);
                    $('.head img').attr({'src':'/assets/images/arrow.png'});
                    $('.head img').removeClass('up');
                })
               
                    
               
            }
            if(this.y < 20 && this.y > -40){
                bscroll.scrollTo(0,-40);
            }
            let dataY = this.y - bscroll.maxScrollY;
            //console.log(dataY);
            if(dataY < 0){
                console.log(111);
                $('.foot img').attr({'src':'/assets/images/ajax-loader.gif'});

                $.ajax({
                    url:'/dm/external/gl.html?projects=599610937143,178499,599613953034,599338180162,599409412896,599890034307,599736823536,599863629962,598649116078,599288498353,599538633407,598602110841,599070250127,598459506734,597868864250,598164661784,177977,178470,598091718728,597632025030,178393,597775885054,599150973391,599316261141,599697177664,599080298568,598788625341,599819951129,597891898384,599538578141&ctl=%E8%AF%9D%E5%89%A7%E6%AD%8C%E5%89%A7'
                }).then((res) => {
                    let data =  res.suggest;
                    //console.log(data);
                    list = [...list,...data];
                    console.log(list);
                    let html = template.render(musicTpl,{
                        list
                    })
                    
                    $('.all-content-list').html(html);
                    
                    bscroll.scrollTo(0,bscroll.maxScrollY + 40,200);
                    $('.foot img').attr({'src':'/assets/images/arrow.png'});
                    $('.foot img').removeClass('down');
                })
            }
        }) 
    }
}

export default new MusicConcert();